<route lang="json5" type="page">
{
  style: { navigationBarTitleText: '兑换中心', navigationStyle: 'custom' },
}
</route>
<template>
  <view class="redemption-center">
    <view class="fixed-bg"></view>
    <image
      src="@/pages-sub/static/redemption_banner.png"
      mode="scaleToFill"
      class="h-[188rpx] w-full"
    />
    <view class="redemption-center__container" :style="{ backgroundImage: `url(${couponBg})` }">
      <label>请输入兑换码</label>
      <view class="redemption-center__container__input">
        <input v-model="activationCode" type="text" placeholder="请输入兑换码" />
      </view>
      <c-button
        :type="'primary'"
        block
        :disabled="!activationCode"
        custom-class="w-full"
        @click="handleClick"
        >立即兑换</c-button
      >

      <view class="redemption-center__container__tips">
        <label>激活说明</label>
        <view class="mb-1">1. 激活成功后，将在有效期内享有无限次使用选岗系统权限。</view>
        <view class="mb-1">2. 兑换激活码立即生效，且兑换后不可退款。</view>
        <view>3. 激活码请妥善保管，若被他人使用，本系统概不负责。</view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  // import couponBg from '@/pages-sub/static/coupon-bg.png';
  import { ApiUserExchangeCode } from '@/service/user';
  import { useUserStore } from '@/store/user';

  const userStore = useUserStore();

  const activationCode = ref('');
  const couponBg = ref('');
  const imgToBase64 = (filePath) => {
    return new Promise((resolve, reject) => {
      wx.getFileSystemManager().readFile({
        filePath,
        encoding: 'base64',
        success: (res) => resolve(`data:image/png;base64,${res.data}`),
        fail: reject,
      });
    });
  };

  const handleClick = () => {
    if (!activationCode.value) {
      return;
    }
    ApiUserExchangeCode({
      activationCode: activationCode.value,
    }).then(() => {
      uni.showToast({
        title: '已成功激活！',
        icon: 'none',
        duration: 2000,
      });
      activationCode.value = '';
      userStore.getUserInfo();
    });
  };
  onLoad(() => {
    imgToBase64('/pages-sub/static/coupon-bg.png').then((res) => {
      couponBg.value = res as string;
    });
  });
</script>

<style lang="scss" scoped>
  .redemption-center {
    font-size: 28rpx;
    &__container {
      margin: 0 32rpx;
      padding: 40rpx 32rpx;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      & > label {
        font-weight: 600;
        font-size: 36rpx;
        color: $uni-color-title;
      }
      &__input {
        background: rgba(62, 70, 84, 0.05);
        border-radius: 20rpx;
        padding: 26rpx 0;
        text-align: center;
        margin: 32rpx 0 48rpx;
      }
      &__tips {
        margin-top: 82rpx;
        & > label {
          font-weight: 600;
          color: $uni-color-title;
          display: block;
          margin-bottom: 24rpx;
        }
        & > view {
          font-weight: 400;
          color: rgba(62, 70, 84, 0.55);
          line-height: 40rpx;
        }
      }
    }
  }
</style>
